<script setup></script>

<template>
  <!-- 主要内容 -->
  <div class="container main-content">
    <div class="content-grid">
      <!-- 左侧主要内容 -->
      <div>
        <!-- 搜索框 -->
        <div class="search-card">
          <div style="max-width: 600px; margin: 0 auto; position: relative">
            <input type="text" class="search-input" placeholder="搜索游戏资料..." />
            <span class="search-icon">
              <svg
                width="20"
                height="20"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                />
              </svg>
            </span>
          </div>
        </div>
        <!-- 资料分类 -->
        <div class="category-grid">
          <!-- 作物资料 -->
          <div class="category-card">
            <div style="display: flex; align-items: center">
              <div>
                <svg
                  width="32"
                  height="32"
                  fill="none"
                  stroke="#059669"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
                  />
                </svg>
              </div>
              <div style="margin-left: 1rem">
                <h3 class="category-title">作物资料</h3>
                <p class="category-desc">查看所有作物的生长周期、季节、价格等信息</p>
                <router-link to="/wiki/encyclopedia" class="category-link">查看全部 →</router-link>
              </div>
            </div>
          </div>
          <!-- 村民资料 -->
          <div class="category-card">
            <div style="display: flex; align-items: center">
              <div>
                <svg
                  width="32"
                  height="32"
                  fill="none"
                  stroke="#059669"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
                  />
                </svg>
              </div>
              <div style="margin-left: 1rem">
                <h3 class="category-title">村民资料</h3>
                <p class="category-desc">了解村民的喜好、行程、对话选项等信息</p>
                <a href="#" class="category-link">查看全部 →</a>
              </div>
            </div>
          </div>
          <!-- 鱼类图鉴 -->
          <div class="category-card">
            <div style="display: flex; align-items: center">
              <div>
                <svg
                  width="32"
                  height="32"
                  fill="none"
                  stroke="#059669"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
                  />
                </svg>
              </div>
              <div style="margin-left: 1rem">
                <h3 class="category-title">鱼类图鉴</h3>
                <p class="category-desc">查看所有鱼类的出现位置、季节、天气等信息</p>
                <a href="#" class="category-link">查看全部 →</a>
              </div>
            </div>
          </div>
          <!-- 物品图鉴 -->
          <div class="category-card">
            <div style="display: flex; align-items: center">
              <div>
                <svg
                  width="32"
                  height="32"
                  fill="none"
                  stroke="#059669"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
                  />
                </svg>
              </div>
              <div style="margin-left: 1rem">
                <h3 class="category-title">物品图鉴</h3>
                <p class="category-desc">查看所有物品的获取方式、用途、价格等信息</p>
                <a href="#" class="category-link">查看全部 →</a>
              </div>
            </div>
          </div>
        </div>
        <!-- 最近更新 -->
        <div class="update-card">
          <h3 class="update-title">最近更新</h3>
          <div class="update-list">
            <div class="update-item">
              <span class="update-badge">新</span>
              <div class="update-info">
                <div class="update-info-title">新增：1.6版本更新内容</div>
                <div class="update-info-date">2024-03-20</div>
              </div>
            </div>
            <div class="update-item">
              <span class="update-badge">更</span>
              <div class="update-info">
                <div class="update-info-title">更新：作物生长周期数据</div>
                <div class="update-info-date">2024-03-19</div>
              </div>
            </div>
            <div class="update-item">
              <span class="update-badge">修</span>
              <div class="update-info">
                <div class="update-info-title">修复：部分鱼类出现时间错误</div>
                <div class="update-info-date">2024-03-18</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧边栏 -->
      <div class="sidebar">
        <div class="sidebar-card">
          <h3 class="sidebar-title">快速导航</h3>
          <div class="sidebar-list">
            <a href="#" class="sidebar-link">季节指南</a>
            <a href="#" class="sidebar-link">节日活动</a>
            <a href="#" class="sidebar-link">成就系统</a>
            <a href="#" class="sidebar-link">技能系统</a>
            <a href="#" class="sidebar-link">工具升级</a>
          </div>
        </div>
        <div class="sidebar-card">
          <h3 class="sidebar-title">热门资料</h3>
          <div class="hot-list">
            <a href="#" class="hot-link">春季作物种植指南</a>
            <div class="hot-desc">2.3k 浏览</div>
            <a href="#" class="hot-link">村民喜好礼物大全</a>
            <div class="hot-desc">1.8k 浏览</div>
            <a href="#" class="hot-link">鱼类图鉴完整版</a>
            <div class="hot-desc">1.5k 浏览</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
body {
  font-family: "Noto Sans SC", sans-serif;
  background-color: #f9fafb;
  margin: 0;
  padding: 0;
}
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}
/* 导航栏 */
.navbar {
  background-color: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
  padding: 0 1rem;
}
.navbar-brand {
  display: flex;
  align-items: center;
}
.navbar-logo {
  height: 2rem;
  width: auto;
}
.navbar-title {
  margin-left: 0.5rem;
  font-size: 1.25rem;
  font-weight: bold;
  color: #059669;
}
.navbar-nav {
  display: none;
}
.nav-link {
  color: #6b7280;
  text-decoration: none;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
}
.nav-link.active,
.nav-link:focus {
  color: #111827;
  border-bottom-color: #059669;
}
.nav-link:hover {
  color: #374151;
  border-bottom-color: #d1d5db;
}
.login-btn {
  background-color: #059669;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
}
.login-btn:hover {
  background-color: #047857;
}
/* 主体布局 */
.main-content {
  padding: 2rem 0;
}
.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .content-grid {
    grid-template-columns: 2fr 1fr;
  }
  .sidebar {
    margin-top: 0;
  }
}
/* 搜索框 */
.search-card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.search-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.75rem 2.5rem 0.75rem 2.5rem;
  font-size: 1rem;
}
.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
}
/* 分类卡片 */
.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .category-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.category-card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  padding: 1.5rem;
}
.category-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: #111827;
  margin: 0;
}
.category-desc {
  font-size: 0.95rem;
  color: #6b7280;
  margin-top: 0.5rem;
}
.category-link {
  color: #059669;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  margin-top: 1rem;
  display: inline-block;
}
.category-link:hover {
  color: #047857;
}
/* 最近更新 */
.update-card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.update-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: #111827;
  margin-bottom: 1rem;
}
.update-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.update-item {
  display: flex;
  align-items: center;
}
.update-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: 2rem;
  border-radius: 9999px;
  background-color: #d1fae5;
  color: #059669;
  font-size: 1rem;
  font-weight: 500;
}
.update-info {
  margin-left: 1rem;
}
.update-info-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: #111827;
}
.update-info-date {
  font-size: 0.85rem;
  color: #6b7280;
}
/* 侧边栏 */
.sidebar {
  margin-top: 2rem;
}
.sidebar-card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.sidebar-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: #111827;
  margin-bottom: 1rem;
}
.sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sidebar-link {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  color: #111827;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}
.sidebar-link:hover {
  background-color: #f9fafb;
}
.hot-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.hot-link {
  color: #111827;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}
.hot-link:hover {
  text-decoration: underline;
}
.hot-desc {
  color: #6b7280;
  font-size: 0.85rem;
}
/* 页脚 */
.footer {
  background-color: white;
  margin-top: 3rem;
  padding: 3rem 0;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -0.5rem -1.25rem;
}
.footer-link {
  padding: 0.5rem 1.25rem;
  color: #6b7280;
  text-decoration: none;
  font-size: 1rem;
}
.footer-link:hover {
  color: #111827;
}
.footer-copyright {
  text-align: center;
  color: #9ca3af;
  font-size: 1rem;
  margin-top: 2rem;
}
@media (min-width: 640px) {
  .navbar-nav {
    display: flex;
    gap: 2rem;
  }
}
</style>
